import React, { useEffect, useRef } from 'react'
import style from './guohome.module.css'
import { Select } from 'antd'
import * as echarts from 'echarts';
function Index() {
  const tuRef = useRef(null)
  useEffect(() => {
    var myChart = echarts.init(tuRef.current);
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      xAxis: {
        type: 'category',
        data: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '24']
      },
      yAxis: {
        type: 'value'
      },
      grid: {
        top: '20px',
        bottom: '30px',
        left: '70px',
        right: '40px'
      },
      series: [
        {
          data: [0, 38000, 100000, 56000, 68000, 43000, 59689, 35000, 42000, 25000, 19000, 26000, 12000, 11000],
          type: 'line',
          smooth: true,
          showSymbol: false,
        }
      ]
    };
    option && myChart.setOption(option);
  }, [])
  const SortData=[
    {key:1,shopimg:'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/09/20/ddb39cb1-54cf-49a5-ac7b-e57779a21309_thumb?v=1727143202000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp',shopname:'为你推荐',num:'9887',price:'223876.31'},
    {key:2,shopimg:'https://pub-cdn-oss.chuangkit.com/designTemplate/2023/08/09/d10691c9-4296-42eb-95ef-c66bf9161b8d_thumb?v=1712681276000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp',shopname:'重阳节',num:'21645',price:'26634.73'},
    {key:3,shopimg:'//pub-cdn-oss.chuangkit.com/ad_position/6e54a105b22b4c71a88e5c83908da221',shopname:'小红书',num:'29089',price:'25485.9'},
     {key:4,shopimg:'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/07/15/7546858f-68de-4ec7-9696-536808d0f82b_thumb?v=1721109901000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp',shopname:'海报',num:'29795',price:'29928.37'},
      {key:5,shopimg:'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/14/fa4dc322-bac0-42c2-b484-8c9f41a1c000_thumb?v=1723601701000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp',shopname:'邀请函',num:'29085',price:'27054.66'}
  ]
  return (
    <div className={style.guoHomeMain}>
      <div className={style.guoHome_Top}>
        <div className={style.Home_title}>
          <h2>关键指数</h2><span>数据截止:2019-10-30 09:52</span>
        </div>
        <div className={style.Home_body}>
          <div className={style.Home_zi}>
            <p>今日交易额(元)</p>
            <p><b>24635.06</b></p>
            <p><span>+3.7% ↑</span></p>
          </div>
          <div className={style.Home_zi}>
            <p>今日订单数(笔)</p>
            <p><b>76</b></p>
            <p><span style={{ color: '#97d797' }}>+1.4% ↓</span></p>
          </div>
          <div className={style.Home_zi}>
            <p>今日总运费(元)</p>
            <p><b>24549.00</b></p>
            <p><span>+5.8% ↑</span></p>
          </div>
          <div className={style.Home_zi}>
            <p>今日总佣金(元)</p>
            <p><b>40129.83</b></p>
            <p><span style={{ color: '#97d797' }}>+3.5% ↓</span></p>
          </div>
          <div className={style.Home_zi}>
            <p>违规提醒</p>
            <p><b style={{ color: '#000', fontSize: '20px' }}>6</b></p>
          </div>
        </div>
      </div>
      <div className={style.guoHome_center}>
        <div className={style.Center_title}>
          <h2>实时数据</h2>
          <div>
            <Select
              defaultValue='10.30'
              style={{ width: 120 }}
              options={
                [
                  { value: '11.01', label: '11.01' },
                  { value: '11.02', label: '11.02' },
                  { value: '11.03', label: '11.03' },
                  { value: '11.04', label: '11.04' },
                  { value: '11.05', label: '11.05' },
                  { value: '11.06', label: '11.06' },
                ]
              }
            ></Select>
            <Select
              defaultValue='2019'
              style={{ width: 120 }}
              options={
                [
                  { value: '2020', label: '2020' },
                  { value: '2021', label: '2021' },
                  { value: '2022', label: '2022' },
                  { value: '2023', label: '2023' },
                  { value: '2024', label: '2024' },
                  { value: '2025', label: '2025' },
                  { value: '2026', label: '2026' },
                ]
              }
            ></Select>
          </div>

        </div>
        <div className={style.Center_tu} ref={tuRef}></div>
      </div>
      <div className={style.guoHome_footer}>
        <div className={style.footer1}>
          <div className={style.footer_title}>
            <h2>品类排行</h2><span>查看更多&gt;</span>
          </div>
          <div className={style.body}>
              <div style={{fontWeight:'700',display:'flex',lineHeight:'50px'}}>
                <p style={{width:80}}>序号</p>
                <p style={{width:240}}>商品</p>
                <p style={{width:150}}>销量(箱)</p>
                <p style={{width:140}}>成交金额(元)</p>
              </div>
              {
                SortData.map((item, index) => (
                  <div style={{display:'flex',lineHeight:'40px'}} key={index}>
                    <p style={{width:80}}>{index + 1}</p>
                    <p style={{width:240}}><img style={{width:40,height:40}} src={item.shopimg} alt="" /></p>
                    <p style={{width:150}}>{item.num}</p>
                    <p style={{width:140}}>{item.price}</p>
                  </div>
                ))
              }
          </div>
        </div>
        <div className={style.footer2}>
          <div className={style.footer_title}>
            <h2>品类排行</h2><span>查看更多&gt;</span>
          </div>
        </div>


      </div>
    </div>
  )
}

export default Index
